import React, { Component } from 'react'
import { connect } from 'react-redux'
import { push } from 'connected-react-router'
import { global as globalDuck, listTable as listTableDuck } from 'ducks'
import ListTable from 'components/ListTable'
import getDatasetPageInfo from 'graphql/org/datasetPageInfo.graphql'
import getDatasets from 'graphql/org/datsetList.graphql'
import { PaddingContainer } from 'components/containers'

const FileList = (orgName, actionInit) => ({ data }) => {
  /* const makeOpt = id => [
    {
      src: Icons.DELETE,
      text: '删除',
      action: () => actionInit({
        graphqlAction: deleteDataset,
        submitValues: { id },
        icon: 'trash alternate',
        title: ' 删除数据集',
        message:
            '请注意：删除数据集的同时会删除对应的文件，对应的项目数据集，以及对应的项目任务',
      }),
    },
  ] */
  return (
    <React.Fragment>
      {data.dataset.map(dataset => (
        <ListTable.Row>
          <ListTable.Link src={`/dataset/${orgName}/${dataset.name}`}>{dataset.name}</ListTable.Link>
          <ListTable.Cell>{dataset.file_type}</ListTable.Cell>
          <ListTable.Cell>{dataset.file_number}</ListTable.Cell>
          <ListTable.Time>{dataset.create_at}</ListTable.Time>
          {/* <ListTable.Action width={2} options={makeOpt(dataset.id)}/> */}
        </ListTable.Row>
      ))}
    </React.Fragment>
  )
}

class DatasetData extends Component {
  componentDidMount() {
    const { setParentActiveItem } = this.props
    setParentActiveItem('dataset')
  }

  render() {
    const { orgName, actionOpen } = this.props
    const RenderList = FileList(orgName, actionOpen)
    const inviteUrl = `/org/${orgName}/newDataset`
    const navSections = [
      {
        path: orgName,
        text: orgName,
      },
      {
        path: `${orgName}/dataset`,
        text: '数据集列表',
      },
    ]
    return (
      <PaddingContainer>
        <ListTable
          nav={{
            path: '',
            homeText: '组织列表',
            homePath: '/org',
            defaultSections: navSections,
          }}
          globalActions={[
            {
              text: '创建数据集',
              url: inviteUrl,
            },
          ]}
          search={{ text: '搜索项目' }}
          sort
          pagination={{
            query: getDatasetPageInfo,
            name: 'dataset_aggregate',
            variables: {
              orgName,
            },
          }}
          listData={{
            query: getDatasets,
            variables: {
              orgName,
              order: [],
              limit: 10,
            },
            header: (
              <ListTable.Header>
                <ListTable.HeaderCell>名称</ListTable.HeaderCell>
                <ListTable.HeaderCell>文件类型</ListTable.HeaderCell>
                <ListTable.HeaderCell>文件数量</ListTable.HeaderCell>
                <ListTable.HeaderCell>创建时间</ListTable.HeaderCell>
              </ListTable.Header>
            ),
            render: <RenderList />,
          }}
          holder={{
            description: '没有任何数据集',
            action: {
              text: '创建数据集',
              url: inviteUrl,
            },
          }}
        />
      </PaddingContainer>
    )
  }
}

const mapStateToProps = state => ({
  user: globalDuck.selectors.user(state),
})

const mapDispatchToProps = {
  link: path => push(path),
  actionOpen: listTableDuck.creators.actionOpen,
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(DatasetData)
